<!--
 * @Author: your name
 * @Date: 2021-11-11 19:17:05
 * @LastEditTime: 2021-11-17 15:28:16
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \mutong-jimu-h5\src\views\HomePage\Recruitment.vue
-->
<template>
  <div class="recruitment">
    <div class="recruitment-item" v-for="(item, index) in userDataJob" :key="index">
      <div class="recruitment-title">
        <span class="title">{{ item.title }}</span>
        <span class="price">{{ item.showPrice }}</span>
      </div>
      <div class="address-date">
        <img src="../../assets/images/location.png" class="location" alt="" />
        <span class="address">{{ item.city }}</span>
        <span class="address">|</span>
        <span class="address" v-if="!item.closed">{{ item.endDay }}截止</span>
        <span class="button" v-if="!item.closed">招募中</span>
        <span class="button finished" v-else>已截止</span>
      </div>
      <div class="recruitment-category">
        <span v-for="(item, index) in item.categoryName.split(',')" :key="index">{{ item }}</span>
      </div>
      <div class="recruitment-desc">
        <div class="desc">
          {{ item.summary }}
          <span v-if="item.showDetail" @click="toJobDetail(item)">详情</span>
        </div>
        <div class="desc-button" @click="conect">
          立即沟通
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import qs from 'qs';
  export default {
    props: ['userDataJob'],
    data() {
      return {};
    },
    computed: {},
    created() {},
    mounted() {
      // 加省略号详情
      this.userDataJob.forEach((item) => {
        if (item.summary.length > 45) {
          item.showDetail = true;
          item.summary = item.summary.slice(0, 45) + '...';
        }
      });
    },
    methods: {
      // 立即沟通触发父组件
      conect() {
        this.$emit('conect');
      },

      // 去详情
      toJobDetail(item) {
        window.location.href = new URL(
          `https://${
            process.env.NODE_ENV === 'development' ? 'dev-' : ''
          }jimu-h5.movtile.com/jobdetail.html?id=${item.jobId}`,
          window.location.href,
        );
      },
    },
  };
</script>
<style lang="less" scoped>
  .recruitment {
    padding: 0rem 2rem;
    .recruitment-item {
      border-top: 1px solid #f3f3f3;
      .recruitment-title {
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #111111;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin-top: 2rem;
        .title {
          text-align: left;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 70%;
        }
        .price {
          width: 30%;
          font-size: 20px;
          font-family: DIN;
          font-weight: bold;
          color: #2247ff;
        }
      }
      .address-date {
        display: flex;
        align-items: center;
        margin-top: 1.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .location {
          width: 1.2rem;
          height: 1.2rem;
        }
        .address {
          margin-left: 0.7rem;
          font-size: 14px;
          font-weight: 400;
          color: #888888;
        }
        .button {
          margin-left: 1rem;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 3.8rem;
          height: 1.6rem;
          // line-height: 1.6rem;
          text-align: center;
          background: #00c284;
          border-radius: 2px;
          font-size: 10px;
          font-weight: 500;
          color: #ffffff;
        }
        .finished {
          background: #888;
        }
      }
      .recruitment-category {
        margin-top: 13px;
        text-align: left;
        display: flex;
        overflow-x: auto;
        span {
          flex-shrink: 0;
          margin-right: 3px;
          padding: 3px 7px;
          background: #f2f2f2;
          border-radius: 11px;
          font-size: 11px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #898989;
        }
        &::-webkit-scrollbar {
          display: none;
        }
      }
      .recruitment-desc {
        margin-top: 15px;
        .desc {
          position: relative;
          padding: 17px;
          text-align: left;
          z-index: 10;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #111111;
          line-height: 27px;
          max-height: 102px;
          white-space: pre-line;
          overflow: hidden;
          // display: -webkit-box;
          // -webkit-box-orient: vertical;
          // -webkit-line-clamp: 3;
          span {
            color: #2247ff;
          }
          &::before {
            z-index: -1;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4.1rem;
            height: 3.4rem;
            background: url(../../assets/images/mark-left.png) 0 0 / cover no-repeat;
          }
          &::after {
            z-index: -1;
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 4.1rem;
            height: 3.4rem;
            background: url(../../assets/images/mark-right.png) 0 0 / cover no-repeat;
          }
        }
        .desc-button {
          margin: 1.8rem 0rem 2.3rem 0rem;
          height: 47px;
          line-height: 47px;
          width: 100%;
          background: #f3f3f3;
          opacity: 0.7;
          border-radius: 3px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 800;
          color: #111111;
        }
      }
    }
  }
</style>
